<template>
  <div class="p-2">
    <el-card shadow="never">
      <div class="card_top">
        <span class="card_title">{{title}}小区信息</span>
        <el-divider class="card_line_first" />
      </div>
      <div class="card_mian">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form ref="projectFormRef" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="小区名称" prop="projectName">
                <el-input v-model="form.projectName" placeholder="请输入小区名称" />
              </el-form-item>
              <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker
                  clearable
                  v-model="form.beginTime"
                  type="date"
                  value="YYYY-MM-DD"
                  value-format= "YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择开始时间"
                  style="width:100%;"
                  class="date-picker-width"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="小区负责人" prop="projectLeader">
                <el-input v-model="form.projectLeader" placeholder="请输入小区负责人" />
              </el-form-item>
              <el-form-item label="负责人联系方式" prop="contactInformation">
                <el-input v-model="form.contactInformation" placeholder="请输入小区负责人联系方式" />
              </el-form-item>
              <el-form-item label="固定资产总额" prop="assetTotal">
                <el-input v-model="form.assetTotal" disabled />
              </el-form-item>
              <el-form-item label="非固定资产总额" prop="notAssetTotal">
                <el-input v-model="form.notAssetTotal" disabled />
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-form>
            <div class="card_footer">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script setup name="projectAdd" lang="ts">
import { addProject, updateProject, getProject } from '@/api/business/project';
import { ProjectVO, ProjectQuery, ProjectForm } from '@/api/business/project/types';

import router from "@/router";

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const projectFormRef = ref<ElFormInstance>();

const buttonLoading = ref(false);
const title = ref("新增")

const initFormData: ProjectForm = {
  id: undefined,
  projectName: undefined,
  beginTime: undefined,
  projectLeader: undefined,
  contactInformation: undefined,
  remark: undefined,
}
const data = reactive<PageData<ProjectForm, ProjectQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectName: undefined,
    beginTime: undefined,
    projectLeader: undefined,
    contactInformation: undefined,
    remark: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "小区id不能为空", trigger: "blur" }
    ],
    projectName: [
      { required: true, message: "小区名称不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 取消按钮 */
const cancel = () => {
  reset();
  goBack()
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  projectFormRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  projectFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (form.value.id) {
        await updateProject(form.value).then(() =>  proxy?.$modal.msgSuccess("修改成功"));
        await getProjectForm(form.value.id);
      } else {
        await addProject(form.value).then(() =>  proxy?.$modal.msgSuccess("新增成功"));
        await goBack()
      }
    }
  });
}

/** 返回 */
const goBack = () =>{
  const obj = { path: "/projectManagement/projectList" };
  proxy?.$tab.closeOpenPage(obj);
}

const getProjectForm = async (id) =>{
  const res = await getProject(id);
  Object.assign(form.value, res.data);
}

onMounted(async () => {
  route.query.type === 'add' ? title.value='新增' : title.value='修改'
  if (route.query.id) {
    await getProjectForm(route.query.id)
  }
});
</script>

<style>
</style>
